<template>
  <div style="padding: 10px;">
    <div style="margin: 10px 0">
      <el-button type="primary" icon="el-icon-document-add" @click="add">新增动态表单</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入内容" style="width:200px" clearable></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 5px;" @click="load">搜索</el-button>
    </div>

    <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%">
      <el-table-column
              prop="id"
              label="序号">
      </el-table-column>
      <el-table-column
              prop="personName"
              label="姓名">
      </el-table-column>
      <el-table-column
              prop="leaveDays"
              label="请假天数">
      </el-table-column>
      <el-table-column
        prop="leaveReason"
        label="请假理由">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="danger">删除</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="用户" :visible.sync="dialogFormVisible">
      <form-create  :rule="rule" v-model="fApi" :option="options" :value.sync="value" />
    </el-dialog>
  </div>
</template>

<script>


  import request from "@/Utils/request";

  export default {
    name: 'CreateTable',
    components: {

    },
    data() {
      return {
        //实例对象
        fApi: {},
        //表单数据
        value: {},
        //表单生成规则
        rule: [],
        //组件参数配置
        options:{
          onSubmit:(formData)=>{
            //alert(JSON.stringify(formData))
            if(formData.id){  //更新
              request.put("http://localhost:9090/formBusiness", formData).then(res => {
                if(res.code == 0){
                  this.$message({
                    showClose: true,
                    message: '恭喜你，更新成功',
                    type: 'success'
                  });
                }else{
                  this.$message({
                    showClose: true,
                    message: '更新失败',
                    type: 'error'
                  });
                }
                this.load()
              })
            } else {           //新增
              formData.templateid = this.templateid   //自定义样式表id关联
              request.post("http://localhost:9090/formBusiness", formData).then(res => {
                if(res.code == 0){
                  this.$message({
                    showClose: true,
                    message: '恭喜你，新增成功',
                    type: 'success'
                  });
                }else{
                  this.$message({
                    showClose: true,
                    message: '新增失败',
                    type: 'error'
                  });
                }
                this.load()  //刷新
              })
            }

            this.dialogFormVisible = false
            //this.$router.go(0);   //刷新页面
          }
        },

        search: '',
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        templateid: 1    //  *** 定义关联的表单样式表id ***
      }
    },
    created(){
      //加载列表
      this.load()

      //加载表单
      //let id = 1   //表单样式关联id
      request.get("http://localhost:9090/formTemplate/"+this.templateid  ).then(res => {
        // console.log(res.data)
        this.rule = formCreate.parseJson(res.data)
      })
    },
    methods: {

      //删除
      handleDelete(id) {
        request.delete("http://localhost:9090/formBusiness/"+id).then(res => {
          if(res.code == 0){
            this.$message({
              showClose: true,
              message: '恭喜你，删除成功',
              type: 'success'
            });
          }else{
            this.$message({
              showClose: true,
              message: '删除失败',
              type: 'error'
            });
          }
          this.load()

        })

      },
      //修改
      handleEdit(row) {
        this.value = row
        this.dialogFormVisible = true
      },

      load(){
        request.get("http://localhost:9090/formBusiness" , {
          params:{
            search: this.search,
            templateid: 1
          }
        } ).then(res => {
          //console.log(res)
          this.tableData = res.data
        })
      },

      add(){ //  新增--生成动态表单
        request.get("http://localhost:9090/formTemplate/"+this.templateid  ).then(res => {
          // console.log(res.data)
          this.rule = formCreate.parseJson(res.data)
        })

        //这本办法可以，但需要把所有的字段全部写出来进行赋空值，比较麻烦
        //this.value = {id:1, personName: "kelvin"}
        this.dialogFormVisible = true
      },

    },
  }
</script>
